<template>
  <div class="register">
    <h2>中国社区</h2>
    <h3>基于黄金大物权通证，让资产更稳定</h3>
    <div class="r-line">
      <input type="text" placeholder="请输入您的推荐人编号" class="nickname" v-model="introduceCode" @blur='introduceCode===null?introduceCode="":""'>
      <i class="wrongText" v-html='introduceCode==null?"":(introduceCode.trim()===""?"推荐人编号不能为空":ok)'></i>
    </div>
    <div class="r-line">
      <input type="text" placeholder="请输入您的昵称" class="nickname" v-model="loginName" @blur='loginName===null?loginName="":""'>
      <i class="wrongText" v-html='loginName==null?"":(loginName.trim()===""?"昵称不能为空":ok)'></i>
    </div>
    <!-- <div class="r-line">
      <input type="text" placeholder="邮箱" class="mail">
    </div> -->
    <div class="r-line">
      <input type="text" placeholder="请输入您的真实姓名" class="realname" v-model='trueName' @blur='trueName===null?trueName="":""'>
      <i class="wrongText" v-html='trueName==null?"":(trueName.trim()===""?"真实姓名不能为空":ok)'></i>
    </div>
    <div class="r-line">
      <input type="text" placeholder="请输入您的身份证号码" class="identityNum" v-model="idCard" @blur='idCard===null?idCard="":""'>
      <i class="wrongText" v-html='idMessage'></i>
    </div>
    <div class="singleLine">
      <input type="radio" name="gender" id="male" @change='getChecked(0)'> 男
      <input type="radio" name="gender" style="margin-left: 35px" @change='getChecked(1)'> 女
    </div>
    <div class="r-line">
      <input type="password" placeholder="输入密码" class="pwd1" v-model='password' @blur='password===null?password="":""'>
      <i class="wrongText" v-html='password==null?"":(password.trim().length>=6?ok:"请至少输入 6 个字符。请不要使用容易被猜到的密码。")'></i>
    </div>
    <div class="r-line">
      <input type="password" placeholder="确认密码" class="pwd2" v-model='surepassword' @blur='surepas' @focus='sureFlag=false'>
      <i class="wrongText" v-html='surepassword==null?"":(surepassword.trim()===""?"确认密码不能为空":(password==surepassword?ok:"两次输入不一致"))'></i>
    </div>
    <div class="r-line">
      <input type="text" placeholder="请输入您的手机号码" class="phone" v-model='phone' @blur='phone===null?phone="":""'>
      <i class="wrongText" v-html='phone==null?"":(phone.trim()===""?"手机号码不能为空":(phoneyz.test(phone.trim())?ok:"手机号码不存在"))'></i>
    </div>
    <div class="r-line">
      <input type="text" placeholder="输入验证码" class="verifyCode" v-model='code'>
      <div class="getCode" @click="getyzm">获取验证码</div>
    </div>
    <div class="registerBtn" @click='register'>注册</div>
    <p class="l-account" @click="changePage('/login')">使用已有账户登录</p>
  </div>
</template>
<script>
import { Message } from "element-ui";
import $ from "jquery"
export default {
  name: "register",
  data() {
    return {
      gender: null,
      idCard: null,
      introduceCode: null,
      loginName: null,
      password: null,
      phone: null,
      trueName: null,
      type: 0,
      surepassword: null,
      sureFlag: false,
      idCardyz: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      idMessage: "",
      ok: "<span style='color: #61d259;'>ok</span>",
      phoneyz: /^1[34578]\d{9}$/,
      code: ""
    };
  },
  watch: {
    idCard(idCard) {
      if (idCard == null) {
        this.idMessage = "";
        return;
      }
      this.idMessage =
        idCard !== null && idCard.trim() === ""
          ? "身份证号码不能为空"
          : this.idCardyz.test(idCard) ? this.ok : "身份证输入不合法";
    },
    password(password) {}
  },
  components: {},
  mounted() {},
  methods: {
    getyzm() {
      if (this.phone.trim() === "") {
        return Message({
          message: "手机号码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }
        // 倒计时
     let count = 60;
     $(".getCode")
       .css("pointer-events", "none")
       .text(count + "秒后重新发送");
     t.timer = setInterval(function() {
       if (count > 0) {
         count = count - 1;
         $(".getCode").text(count + "秒后重新发送");
       } else {
         $(".getCode").css("pointer-events", "");
         $(".getCode").text("获取验证码");
         count = 60;
         clearInterval(timer);
       }
                }, 1000);
      u.yzm({ phone: this.phone }, data => {
        if (data && data.code == "000000") {
          return Message({
            message: "验证码发送成功",
            type: "success"
          });
        } else {
          return Message({
            message: "验证码发送失败，请重新获取",
            type: "error"
          });
        }
      });
    },
    changePage(d) {
      this.$router.push({ path: d });
    },
    getChecked(sex) {
      this.gender = sex;
    },
    surepas() {
      this.surepassword === null ? (this.surepassword = "") : "";
      this.sureFlag = true;
    },
    register() {
      let data = {
        gender: this.gender,
        idCard: this.idCard,
        introduceCode: this.introduceCode,
        loginName: this.loginName,
        password: this.password,
        phone: this.phone,
        trueName: this.trueName,
        type: this.type,
        code: this.code
      };
      let [k, flag] = [null, true];
      for (k in data) {
        if (data[k] !== 0 && !data[k]) {
          flag = false;
        }
      }
      if (!flag) {
        return Message({
          message: "有信息尚未填写",
          type: "error"
        });
      }
      if (this.password.trim() !== this.surepassword.trim()) {
        return Message({
          message: "两次密码不一致",
          type: "error"
        });
      }
      if (this.password.length < 6) {
        return Message({
          message: "密码安全性太低",
          type: "error"
        });
      }
      if (!this.idCardyz.test(this.idCard)) {
        return Message({
          message: "身份证输入不合法",
          type: "error"
        });
      }
      if (!this.phoneyz.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }

      u.register(data, data => {
        if (data && data.code == "200") {
          Message({
            message: "注册成功",
            type: "success"
          });
          this.$router.push({ path: "/login" });
        } else {
          Message({
            message: data.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.register {
  padding: 0 33%;
  width: 100%;
  height: 100%;
  min-height: 800px;
  overflow: auto;
  text-align: center;
  overflow-y: auto;
  h2 {
    margin-top: 65px;
    margin-bottom: 20px;
    font-size: 34px;
    color: #333333;
  }

  h3 {
    margin-bottom: 65px;
    font-size: 24px;
    color: #666666;
  }

  .r-line {
    margin-bottom: 24px;
    width: 100%;
    height: 60px;
    position: relative;

    input[type='text'], input[type='password'] {
      display: inline-block;
      padding-left: 27px;
      width: 100%;
      height: 100%;
      font-size: 16px;
      color: #646b77;
      outline: none;
      border-radius: 4px;
      border: 1px solid #ded8c5;
      vertical-align: top;

      &:focus {
        border-color: #ffb001;
      }

      &::-webkit-input-placeholder {
        color: #b8bcc5;
      }

      &:-moz-placeholder {
        color: #b8bcc5;
      }
    }

    .wrong {
      border: 1px solid #f11c00 !important;
    }

    .wrongText {
      display: flex;
      align-items: center;
      position: absolute;
      left: calc(100% + 20px);
      top: 0;
      width: 400px;
      height: 60px;
      font-size: 16px;
      color: #f11c00;
    }

    .verifyCode {
      margin-right: 3%;
      width: 75% !important;
    }

    .getCode {
      display: inline-block;
      width: 20%;
      height: 100%;
      font-size: 16px;
      color: white;
      background: #ffb001;
      text-align: center;
      line-height: 60px;
      border-radius: 4px;
      vertical-align: top;
      cursor: pointer;
    }
  }

  .singleLine {
    margin-bottom: 24px;
    font-size: 13px;
    color: #666666;
    text-align: left;

    input {
      width: 16px;
      height: 16px;
      border: 1px solid #e4e7ea;
      border-radius: 50%;
      -webkit-appearance: none;
      outline: none;
      background-color: white;

      &:checked {
        background: url('../../../static/images/radioChecked.png') no-repeat center;
      }
    }
  }

  .registerBtn {
    margin-top: 45px;
    width: 100%;
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    color: white;
    background: #ffb001;
    border-radius: 4px;
    cursor: pointer;
  }

  .l-account {
    margin-top: 10px;
    margin-bottom: 36px;
    text-align: right;
    font-size: 12px;
    color: #ffb001;
    cursor: pointer;
  }
}
</style>
<style>
</style>

